<template>
  <DetailBox :title="getRouteTitle()" :border="2">
    <template #center>
      <slot name="center">

        <el-row :gutter="12">
          <el-col :span="5">
            <ContentBox :title="'部门列表'" :border="3" :marginHeight="192">
              <template #center>
                <slot name="center">
                  <ZTree @eSaveNodes="onSaveNodes" v-bind="state"/>
                </slot>
              </template>
            </ContentBox>
          </el-col>
          <el-col :span="19">
            <el-row :gutter="12">
              <el-col :span="16">
                <ContentBox :title="'内容区域'" :border="3" :height="300">
                  <template #center>
                    <slot name="center">

                    </slot>
                  </template>
                </ContentBox>
              </el-col>
              <el-col :span="8">
                <ContentBox :title="'内容区域'" :border="3" :height="300">
                  <template #center>
                    <slot name="center">

                    </slot>
                  </template>
                </ContentBox>
              </el-col>


            </el-row>
            <ContentBox :title="'内容区域'" :border="3" :marginHeight="570">
              <template #center>
                <slot name="center">

                </slot>
              </template>
            </ContentBox>
          </el-col>
        </el-row>


      </slot>
    </template>
  </DetailBox>

</template>

<script setup lang="ts">
import {reactive, ref, watch} from 'vue';
import DetailBox from "@/views/components/DetailBox.vue";
import ContentBox from "@/views/components/ContentBox.vue";
import { ElTree } from 'element-plus'
import {getRouteTitle} from "@/utils";
import ZTree from "@/views/components/ZTree/index.vue"


interface Tree {
  id: number
  label: string
  children?: Tree[]
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const defaultProps = {
  children: 'children',
  label: 'label',
}

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const state = reactive({
  treeData: [
    {
      id: 1,
      label: '一级 1一级一级一级一级一级一级一级一级一级一级一级一级',
      disabled: true,
      children: [
        {
          id: 4,
          label: '二级 1-1',
          disabled: null,

          children: [
            {
              id: 9,
              label: '三级 1-1-1',
            },
            {
              id: 10,
              label: '三级 1-1-2',
            },
          ],
        },
      ],
    },
    {
      id: 2,
      label: '一级 2',
      children: [
        {
          id: 5,
          label: '二级 2-1',
        },
        {
          id: 6,
          label: '二级 2-2',
        },
      ],
    },
    {
      id: 3,
      label: '一级 3',
      children: [
        {
          id: 7,
          label: '二级 3-1',
        },
        {
          id: 8,
          label: '二级 3-2',
        },
      ],
    },
    {
      id: 1,
      label: '一级 1一级一级一级一级一级一级一级一级一级一级一级一级',
      disabled: true,
      children: [
        {
          id: 4,
          label: '二级 1-1',
          disabled: null,

          children: [
            {
              id: 9,
              label: '三级 1-1-1',
            },
            {
              id: 10,
              label: '三级 1-1-2',
            },
          ],
        },
      ],
    },
    {
      id: 2,
      label: '一级 2',
      children: [
        {
          id: 5,
          label: '二级 2-1',
        },
        {
          id: 6,
          label: '二级 2-2',
        },
      ],
    },
    {
      id: 3,
      label: '一级 3',
      children: [
        {
          id: 7,
          label: '二级 3-1',
        },
        {
          id: 8,
          label: '000000000000000000000',
        },
      ],
    },
    {
      id: 4,
      label: '一级 3',
      children: [
        {
          id: 7,
          label: '二级 3-1',
        },
        {
          id: 8,
          label: '222222',
        },
      ],
    },
    {
      id: 5,
      label: '一级 3',
      children: [
        {
          id: 7,
          label: '二级 3-1',
        },
        {
          id: 8,
          label: '注意不要遮挡数据，底部要展示出来-----------------------------------------',
        },
      ],
    },
  ],
  isOperator: [
    'add',
    'delete',
    'search',
  ],
});

function onSaveNodes(data: Tree) {
  console.log(data);
}

</script>

<style>
</style>
